<template>
  <div class="settle-wrapper">
    <common-back :content="title"></common-back>
    <van-loading class="v-loading"
                 size="30px"
                 color="white"
                 v-show="!list.length" />
    <common-scroll class="scroll"
                   ref="scroll"
                   v-if="list.length">
      <div class="scroll-content">
        <common-address @address="handleAddress"></common-address>
        <common-product :list="list"
                        @changeNum="handleChangeNum"
                        :isDetele="isDetele"></common-product>
        <!-- <common-ticket @check="handleCheckDiscount"></common-ticket> -->
        <common-pay :isCheck="isCheck"
                    @changeIsCheck="handleChangeIsCheck"></common-pay>
        <common-protocol @protocol="handleProtocol"></common-protocol>
      </div>
    </common-scroll>
    <common-settle class="settle"
                   :price="changePrice"
                   :username="userName"
                   :phone="phone"
                   :address="address"
                   :list="changeList"
                   :flag="flag"
                   :coupon_id="coupon_id"
                   :isCheck="isCheck"
                   :isSelect="isSelect"></common-settle>
    <van-actionsheet v-model="show"
                     title="选项"
                     class="actionsheet"
                     v-if="newActions.length">
      <ul class="ticket-list">
        <li class="ticket-item"
            border-radius
            v-for="(item, index) of newActions"
            :key="item.coupon_id"
            @click="handleCheck(index, item.coupon_id)">
          <div class="title">{{item.coupon_name}}</div>
          <div class="info">
            <div class="price">￥<span>{{item.prefer_amount}}</span></div>
            <div class="use">
              <i class="iconfont"
                 :class="{green: index === currentIndex}">&#xe6e5;</i>
            </div>
          </div>
        </li>
      </ul>
    </van-actionsheet>
  </div>
</template>
<script>
import CommonScroll from 'common/scroll/scroll'
import CommonBack from 'common/headerBack/back'
import CommonAddress from 'common/addressInfo/info'
import CommonProduct from 'common/productList/list'
import CommonPay from 'common/pay/pay'
import CommonSettle from 'common/settleAccounts/settleAccounts'
// import CommonTicket from 'common/ticket/ticket'
import CommonProtocol from 'common/pay/protocol'
export default {
  name: 'DetailSettle',
  components: {
    CommonScroll,
    CommonBack,
    CommonAddress,
    CommonProduct,
    CommonPay,
    CommonSettle,
    CommonProtocol
    // CommonTicket
  },
  data () {
    return {
      title: '结算',
      list: [],
      count: 1,
      price: 0,
      changePrice: 0,
      isDetele: false,
      isCheck: true,
      isSelect: true,
      address: '',
      coupon_id: 0,
      goods_id: this.$route.params.id,
      userName: '',
      phone: '',
      flag: false,
      changeList: [],
      show: false,
      actions: [],
      currentIndex: ''
    }
  },
  computed: {
    newActions () {
      const result = []
      this.actions.filter((item) => {
        if (Number(item.min_amount) < this.changePrice) {
          result.push(item)
        }
      })
      return result
    }
  },
  created () {
    // this.getAddress()
    this.getAjax()
  },
  methods: {
    getAjax () {
      const _this = this
      Promise.all([_this.getInfo(), _this.getDiscount()])
        .then((res) => { })
        .catch((e) => {
          this.$errorTip()
        })
    },
    // 免责协议
    handleProtocol (isSelect) {
      this.isSelect = isSelect
    },
    getAddressSucc (res) {
      console.log(res)
    },
    getInfo () {
      const id = this.$route.params.id
      this.$api.common.buy({ goods_id: id })
        .then(this.getInfoSucc)
        .catch((e) => {
          this.$errorTip()
        })
    },
    getInfoSucc (res) {
      res = res.data
      if (res.code === this.$api.CODE_OK && res.data) {
        const data = res.data
        this.list = data.order.goods_list
        this.changeList = data.order.goods_list
        this.price = Number(data.order.goods_price)
        this.changePrice = Number(data.order.goods_price)
        this.flag = data.order.flag
      } else if (res.code === this.$api.CODE_ERR) {
        this.$router.back()
        this.$tip('请购买会员')
      }
    },
    handleChangeNum (list) {
      list.map((item) => {
        this.count = item.cart_num
        this.changePrice = item.cart_num * this.price
      })
      this.changeList = list
    },
    handleChangeIsCheck (flag) {
      this.isCheck = flag
    },
    handleCheckDiscount () {
      if (this.newActions.length) {
        this.show = true
      } else {
        this.$tip('您没有优惠券可以选择')
      }
    },
    getDiscount () {
      this.$api.common.discountList()
        .then(this.getDiscountSucc)
        .catch((e) => {
          this.$errorTip()
        })
    },
    getDiscountSucc (res) {
      res = res.data
      if (res.code === this.$api.CODE_OK && res.data) {
        const data = res.data
        this.actions = data.coupon
      }
    },
    handleCheck (index, id) {
      this.currentIndex = index
      this.coupon_id = id
    },
    handleAddress (address, phone, name) {
      this.address = address
      this.phone = phone
      this.userName = name
    }
  }
}
</script>
<style lang="stylus" scoped>
@import '~stylus/variable.styl'
@import '~stylus/mixins.styl'

.settle-wrapper >>> .van-actionsheet--withtitle
  touch-action default
  max-height 575px

.settle-wrapper >>> .van-actionsheet__header
  height 86px
  font-size $address
  font-weight 400
  color $common_fz_color
  display flex
  align-items center
  justify-content space-between
  padding-left 30px
  padding-right 30px
  box-sizing border-box
  background $calculate

.settle-wrapper >>> .van-icon-close
  font-size $address
  font-weight 400
  color $common_fz_color
  margin-top 13px

.settle-wrapper
  initPosition()
  background-color $space
  z-index 12
  touch-action none

  .scroll
    top 98px
    padding()
    bottom 110px

.v-loading
  position fixed
  top 50%
  left 50%
  transform translate(-50%, -50%)
  z-index 100
  padding-left 10px
  padding-right 10px
  padding-top 10px
  padding-bottom 10px
  border-radius 3px
  background-color rgba(0, 0, 0, 0.5)

.ticket-list
  width 100%
  padding-top 24px
  padding-right 35px
  padding-left 35px
  box-sizing border-box

  .ticket-item
    width 681px
    border-radius 16px
    bgckImg('~@/assets/images/ticket.png', center, center)
    padding-bottom 24px
    box-sizing border-box
    margin-bottom 20px
    overflow hidden

    [border-radius]::before
      border-radius 16px

    .title
      width 100%
      font-size $address
      padding-left 30px
      padding-right 30px
      box-sizing border-box
      font-weight 400
      color $footer_bgc
      line-height 76px
      border-bottom 8px dotted #F2F6F5
      position relative

      &:before, &:after
        content ''
        position absolute
        bottom -13px
        left -13px
        width 26px
        height 26px
        background-color #F2F6F5
        border-radius 50%

      &:after
        right -13px
        left auto

    .info
      display flex
      justify-content space-between
      align-items flex-end
      padding-left 30px
      padding-right 30px
      box-sizing border-box

      .price
        font-size $address
        font-weight 500
        color $footer_bgc
        display flex
        align-items flex-end

        span
          font-size 86px
          margin-right 10px
          line-height 86px

      .use i
        font-size $address
        color $space
        height 100%

      .use .green
        color $paidState
</style>
